<template>
    <div>
        <div class="header flex">
            <div class="h-left">
                <van-icon name="search" />
                <input type="text" name="" id="" placeholder="微信号/邮箱号" v-model="num">
            </div>
            <div class="h-right f-center" @click="toLast">
                取消
            </div>
        </div>
        <div class="tip flex" v-show="showSearchBox">
            <div class="tip-left f-center">
                <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xindepengyou"></use>
                </svg>
            </div>
            <div class="tip-right f-center" @click="searchUser">
                <span>搜索：</span>
                <span style="color:#07C160;">{{num}}</span>
            </div>
        </div>
    </div>
</template>
<script>
import {Meteor} from 'meteor/meteor';
export default {
    data() {
        return {
            num:'',
            showSearchBox:false
        }
    },
    methods:{
        toLast(){
            this.$router.go(-1)
        },
        searchUser(){
            let user = sessionStorage.getItem('user')
             Meteor.call('user.findByType',this.num,(err,res)=>{
                 if(err){
                     this.$toast(err.error)
                 }
                 else{
                     if(res._id == user)
                     {
                         this.$toast('搜索账号为当前账号')
                     }
                     else{
                         this.$router.push('userBase/'+res._id)
                     }
                 }
             })
            
        }
    },
    watch:{
        num(){
            if(this.num.trim().length>0){
                this.showSearchBox = true
            }
            else{
                this.showSearchBox = false
            }
        }
    }
}
</script>
<style scoped>
.header{
    padding: .3rem;
    box-sizing: border-box;
}
.h-left{
    position: relative;
}
 .van-icon{
     position: absolute;
     left: 0;
     top: .5rem;
     font-size: .7rem;
 }
 input{
     border: none;
     background-color: #fff;
     border-radius: .2rem;
     width: 76vw;
     font-size: .7rem;
     padding: .3rem 0 .3rem 1rem;
 } 
 input::placeholder {
     font-size: .6rem;
}
 .h-right{
     flex: 1;
     color: darkcyan;
     font-size: .7rem;
 }
 .tip{
     margin-top: .5rem;
     background-color: #fff;
     padding: .3rem;
 }
 .tip:active{
     background-color: #f7f7f7;
 }
 .tip-left{
     background-color: #07C160;
    padding: .3rem;
 }
 .icon{
     color: #fff;
 }
 .tip-right{
     font-size: .6rem;
     margin-left: .5rem;
 }  
</style>
